<template>
    <section>
        <el-col :span="24">
            <el-form inline>
                <el-form-item>
                    <el-input v-model.trim="form.number" placeholder="款号，多个用逗号隔开" clearable @keyup.enter.native="searchBtn" style="width: 180px;" size="small"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model.trim="form.package_number" placeholder="套装编码" clearable style="width: 150px;" size="small"></el-input>
                </el-form-item>
<!--                <el-form-item>-->
<!--                    <el-select v-model="form.brand_id" placeholder="品牌" clearable size="small" style="width: 120px">-->
<!--                        <el-option v-for="(item,index) in brandList" :key="index" :label="item.name" :value="item.id"></el-option>-->
<!--                    </el-select>-->
<!--                </el-form-item>-->
                <el-form-item>
                    <el-select v-model="form.designer" filterable remote placeholder="产品负责人" size="small" style="width: 120px;"
                               :remote-method="searchUserBtn" allow-create clearable>
                        <el-option v-for="(item, index) in userList" :label="item.name" :value="item.name" :key="index" ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="form.f3" filterable remote placeholder="图稿设计师" size="small" style="width: 120px;"
                               :remote-method="searchUserBtn" allow-create clearable>
                        <el-option v-for="(item, index) in userList" :label="item.name" :value="item.name" :key="index" ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input v-model.trim="form.materiel" placeholder="物料名称" clearable style="width: 120px;" size="small"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-popover placement="bottom" width="400" trigger="click">
                        <el-form label-width="90px" label-position="left">
                            <el-form-item label="确认状态">
                                <el-select v-model="form.state" placeholder="确认状态" clearable size="small" style="width: 100%">
                                    <el-option v-for="(item,index) in states" :key="index" :label="item.label" :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="上新月份">
                                <el-date-picker v-model="form.year_month" type="month" value-format="yyyy-MM" placeholder="对账月份" style="width: 100%" size="small" clearable>
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="款名">
                                <el-input v-model.trim="form.name" placeholder="设计名称/款名" clearable style="width: 100%;" size="small"></el-input>
                            </el-form-item>
                            <el-form-item label="季节">
                                <el-select v-model="form.season_id" placeholder="季节" clearable size="small" style="width: 100%">
                                    <el-option v-for="(item,index) in seasonList" :key="index" :label="item.name" :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="品类">
                                <el-select v-model="form.product_category_id" placeholder="品类" clearable size="small" style="width: 100%">
                                    <el-option v-for="(item,index) in productCategoryList" :key="index" :label="item.name" :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="设计分类">
                                <el-cascader :options="categoryList" :props="categoryProps" size="small" @change="categoryChange"
                                             clearable style="width: 100%;"></el-cascader>
                            </el-form-item>
                            <el-form-item label="版师">
                                <el-select v-model="form.paper_designer" filterable remote placeholder="输入搜索" size="small" style="width: 100%;"
                                           :remote-method="searchUserBtn" allow-create clearable>
                                    <el-option v-for="(item, index) in userList" :label="item.name" :value="item.name" :key="index" ></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="绣花版师">
                                <el-select v-model="form.embroider_designer" filterable remote placeholder="输入搜索" size="small" style="width: 100%;"
                                           :remote-method="searchUserBtn" allow-create clearable>
                                    <el-option v-for="(item, index) in userList" :label="item.name" :value="item.name" :key="index" ></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="供应商">
                                <el-input v-model.trim="form.supplier" placeholder="供应商" clearable style="width: 100%;" size="small"></el-input>
                            </el-form-item>
                        </el-form>
                        <el-badge slot="reference" class="more-btn" :is-dot="(!!form.state || !!form.paper_designer || !!form.embroider_designer || !!form.season_id ||
                            !!form.category_id || !!form.product_category_id || !!form.name || !!form.year_month || !!form.supplier)">
                            <el-button size="small" type="warning" plain>更多</el-button>
                        </el-badge>
                    </el-popover>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="el-icon-search" @click="searchBtn" size="small" :loading="btnLoading">查询</el-button>
                    <el-button type="warning" class="el-icon-plus" size="small" @click="addBtn" :disabled="!nodeActions.includes('add')">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="24" style="overflow-y:auto;" :style="{'height': tableHeight}">
            <div class="DesignFiles-module">
                <div class="DesignFiles-module-div" v-for="item in data" :key="item.id" v-loading="loading"
                     @mouseenter="activeBtn(item.id)" @mouseleave="activeBtn('')">
                    <!--赠品-->
                    <div class="DesignFiles-module-div-gif" v-if="item.is_gif == 1">
                        <svg t="1718256219040" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5155" width="48" height="48"><path d="M511.607562 67.781756c-244.343007 0-442.423365 198.097754-442.423365 442.439738s198.080358 442.440761 442.423365 442.440761c244.343007 0 442.424388-198.098777 442.424388-442.440761S755.95057 67.781756 511.607562 67.781756M511.607562 908.122853c-219.74068 0-397.882939-178.159656-397.882939-397.901359 0-219.74068 178.14226-397.900336 397.882939-397.900336 219.741703 0 397.883963 178.159656 397.883963 397.900336C909.491525 729.963197 731.349265 908.122853 511.607562 908.122853" fill="#A52525" p-id="5156"></path><path d="M730.670813 385.771087c-0.191358-0.227174-0.401136-0.469698-0.608867-0.679475-0.243547-0.207731-0.452301-0.417509-0.696872-0.62524-3.91517-3.827165-8.993838-6.210445-14.648628-6.210445-0.314155 0-0.626263 0.104377-0.991584 0.121773-0.401136-0.017396-0.782829-0.121773-1.236154-0.121773l-34.099632 0 23.035646-39.947827c6.714935-11.639085 3.583618-26.062586-6.995321-32.169677-10.612709-6.123464-24.653493-1.635243-31.384801 10.021238l-31.771611 55.153134c-1.287319 2.226714-1.912559 4.592598-2.469238 6.942109l-12.353352 0c-0.591471-2.349511-1.216711-4.714372-2.470261-6.942109l-31.803333-55.153134c-6.733355-11.656481-20.774139-16.144702-31.352055-10.021238-10.613732 6.107091-13.726629 20.530592-6.995321 32.169677l23.01825 39.947827-44.313252 0c-0.419556 0-0.836041 0.104377-1.236154 0.121773-0.329505-0.017396-0.64366-0.121773-0.991584-0.121773-5.65479 0-10.718109 2.38328-14.649652 6.210445-0.207731 0.208754-0.451278 0.417509-0.678452 0.62524-0.226151 0.209778-0.435928 0.452301-0.62524 0.679475-3.828188 3.914146-6.211469 8.994861-6.211469 14.649652 0 0.330528 0.104377 0.642636 0.104377 0.992607-0.016373 0.416486-0.104377 0.799202-0.104377 1.235131l0 125.389802c0 0.730641 0.13917 1.427512 0.208754 2.157129-0.069585 0.591471-0.208754 1.130753-0.208754 1.739621 0 12.248975 10.926864 22.148439 24.393573 22.148439l189.954283 0c13.500479 0 24.39255-9.899464 24.39255-22.148439 0-0.608867-0.138146-1.14815-0.191358-1.739621 0.069585-0.729617 0.191358-1.426489 0.191358-2.157129L736.882282 402.647453c0-0.434905-0.085958-0.817622-0.103354-1.235131 0.017396-0.348947 0.103354-0.662079 0.103354-0.992607C736.882282 394.765949 734.499002 389.685233 730.670813 385.771087M542.437731 422.569178l52.927443 0 0 87.217411L542.437731 509.786589 542.437731 422.569178zM639.660007 422.569178l52.92642 0 0 87.217411-52.92642 0L639.660007 422.569178z" fill="#A52525" p-id="5157"></path><path d="M329.508177 630.479415c12.238742 0 22.138206-10.908444 22.138206-24.358781L351.646384 370.913705l70.533426 0.155543 0 235.05241c0 13.450337 9.91686 24.358781 22.13002 24.358781 12.248975 0 22.147416-10.908444 22.147416-24.358781L466.457246 352.627223c0-0.662079-0.119727-1.322112-0.171915-2.01796 0.052189-0.539282 0.171915-1.079588 0.171915-1.636267 0-12.247952-10.907421-22.165836-24.373107-22.165836l-105.165178-0.226151c-3.539616 0-6.889921 0.730641-9.91686 1.965771-11.030218 1.391696-19.634176 11.586896-19.634176 24.079418l0 253.494435C307.368948 619.570971 317.268412 630.479415 329.508177 630.479415" fill="#A52525" p-id="5158"></path><path d="M409.966651 439.219393c0-13.467733-9.91686-24.375154-22.13002-24.375154-12.247952 0-22.165836 10.908444-22.165836 24.375154 0 0-0.487094 54.926984-0.487094 100.406804 0 106.790188-48.63672 155.227364-59.598376 168.189583-3.722788 4.417613-13.805424 17.22429-2.226714 30.046317 12.81384 14.19735 32.299637 0.833995 40.372499-5.01113 15.328104-11.099802 65.748447-73.072249 65.748447-191.363376C409.479557 495.990375 409.966651 439.219393 409.966651 439.219393" fill="#A52525" p-id="5159"></path><path d="M430.549431 664.99758c-7.707542-11.013845-22.112624-14.265912-32.118512-7.255241-10.038634 7.012717-11.882632 21.642926-4.157693 32.67519l33.335223 42.817178c7.724938 11.031241 22.112624 14.265912 32.118512 7.236821 10.038634-7.011694 11.900028-21.642926 4.174066-32.674167L430.549431 664.99758z" fill="#A52525" p-id="5160"></path><path d="M714.543508 600.484264c0-12.213159-10.908444-22.13002-24.375154-22.13002l-145.311527-0.452301c-11.865235 0-21.729907 7.725962-23.905456 17.921161-1.757017 3.478218-2.817162 7.445576-2.817162 11.691273l0 125.423571c0 1.305739 0.155543 2.592035 0.330528 3.846608-0.157589 1.043772-0.330528 2.087545-0.330528 3.166109 0 12.231579 10.908444 22.165836 24.373107 22.165836l145.313573 0.416486c11.498892 0 21.103644-7.270591 23.660886-17.032932 2.01796-3.687996 3.254114-7.951089 3.254114-12.562107L714.735889 607.513354c0-1.635243-0.156566-3.219321-0.451278-4.767584C714.368522 601.981361 714.543508 601.267093 714.543508 600.484264M670.419568 642.154315l-108.008946-0.331551 0-19.571754 108.008946 0.329505L670.419568 642.154315zM562.411645 686.11862l108.008946 0.314155 0 31.769564-108.008946-0.331551L562.411645 686.11862z" fill="#A52525" p-id="5161"></path><path d="M565.160245 438.941054c-12.544711 0-22.722514 10.178827-22.722514 22.705118 0 12.562107 10.177803 22.705118 22.722514 22.705118 12.526291 0 22.722514-10.143011 22.722514-22.705118C587.882759 449.118857 577.686537 438.941054 565.160245 438.941054" fill="#A52525" p-id="5162"></path><path d="M666.348855 438.941054c-12.543687 0-22.721491 10.178827-22.721491 22.705118 0 12.562107 10.177803 22.705118 22.721491 22.705118 12.528338 0 22.723537-10.143011 22.723537-22.705118C689.072393 449.118857 678.877193 438.941054 666.348855 438.941054" fill="#A52525" p-id="5163"></path></svg>
                    </div>
                    <!--停用-->
                    <div class="DesignFiles-module-div-stop" v-if="item.approval_state == 4">
                        <svg t="1718256915569" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8434" width="256" height="256"><path d="M217.088 226.645333C356.352 88.746667 574.805333 69.632 734.549333 178.858667c1.365333 1.365333 4.096 1.365333 5.461334-1.365334 1.365333-1.365333 1.365333-4.096-1.365334-5.461333-163.84-111.957333-386.389333-92.842667-527.018666 49.152C64.170667 368.64 50.517333 602.112 176.128 767.317333c1.365333 1.365333 4.096 2.730667 5.461333 1.365334 1.365333-1.365333 2.730667-4.096 1.365334-5.461334C58.709333 600.746667 72.362667 371.370667 217.088 226.645333zM835.584 264.874667c-1.365333-1.365333-4.096-2.730667-5.461333-1.365334-1.365333 1.365333-2.730667 4.096-1.365334 5.461334 122.88 161.109333 109.226667 390.485333-35.498666 535.210666-143.36 143.36-371.370667 158.378667-532.48 36.864-1.365333-1.365333-4.096-1.365333-5.461334 1.365334s-1.365333 4.096 1.365334 5.461333c163.84 124.245333 397.312 109.226667 543.402666-36.864 147.456-148.821333 161.109333-382.293333 35.498667-546.133333z" fill="#FFB2B2" p-id="8435"></path><path d="M208.137815 813.70591a15.018667 15.018667 0 1 0 21.239231-21.239973 15.018667 15.018667 0 1 0-21.239231 21.239973Z" fill="#FFB2B2" p-id="8436"></path><path d="M782.650241 224.622041a15.018667 15.018667 0 1 0 21.239232-21.239973 15.018667 15.018667 0 1 0-21.239232 21.239973Z" fill="#FFB2B2" p-id="8437"></path><path d="M745.472 780.970667l10.922667 15.018666 5.461333-17.749333 16.384-5.461333-15.018667-10.922667v-17.749333l-15.018666 10.922666-17.749334-6.826666 6.826667 17.749333-10.922667 13.653333zM658.090667 823.296l10.922666 16.384 5.461334-17.749333 16.384-5.461334-15.018667-10.922666v-17.749334l-15.018667 9.557334-16.384-5.461334 5.461334 17.749334-10.922667 13.653333zM800.085333 708.608l4.096-17.749333 17.749334-5.461334-15.018667-10.922666v-17.749334l-15.018667 10.922667-17.749333-6.826667 6.826667 17.749334-10.922667 15.018666h19.114667z" fill="#FFB2B2" p-id="8438"></path><path d="M512 5.461333C232.106667 5.461333 5.461333 232.106667 5.461333 512S232.106667 1018.538667 512 1018.538667 1018.538667 791.893333 1018.538667 512 791.893333 5.461333 512 5.461333z m0 985.770667c-264.874667 0-479.232-215.722667-479.232-479.232S247.125333 32.768 512 32.768c264.874667 0 479.232 215.722667 479.232 479.232S776.874667 991.232 512 991.232z" fill="#FFB2B2" p-id="8439"></path><path d="M293.546667 428.714667c-2.730667-2.730667-5.461333-4.096-6.826667-2.730667L166.570667 546.133333c-1.365333 1.365333 0 4.096 2.730666 6.826667s5.461333 4.096 6.826667 2.730667l120.149333-120.149334c1.365333 0 0-4.096-2.730666-6.826666zM555.690667 158.378667l-120.149334 120.149333c-1.365333 1.365333 0 4.096 2.730667 6.826667s5.461333 4.096 6.826667 2.730666l120.149333-120.149333c1.365333-1.365333 0-4.096-2.730667-6.826667s-6.826667-4.096-6.826666-2.730666zM857.429333 445.098667c-2.730667-2.730667-6.826667-4.096-8.192-2.730667L435.541333 857.429333c-1.365333 1.365333 0 5.461333 2.730667 8.192 2.730667 2.730667 6.826667 4.096 8.192 2.730667L860.16 451.925333c1.365333-1.365333 0-4.096-2.730667-6.826666zM363.178667 368.64l17.749333 25.941333 10.922667-31.402666 32.768-12.288-25.941334-17.749334 1.365334-32.768-27.306667 21.845334-30.037333-9.557334 8.192 31.402667-20.48 27.306667zM324.949333 714.069333l-13.653333 13.653334 75.093333 75.093333c12.288 12.288 24.576 13.653333 36.864 1.365333l80.554667-80.554666c5.461333-6.826667 8.192-12.288 8.192-19.114667 0-6.826667-8.192-19.114667-24.576-39.594667l-17.749333 9.557334c13.653333 16.384 21.845333 25.941333 21.845333 30.037333 0 4.096-1.365333 6.826667-4.096 9.557333l-72.362667 72.362667c-5.461333 5.461333-10.922667 5.461333-16.384 0l-39.594666-39.594667 90.112-90.112-61.44-61.44-109.226667 109.226667 13.653333 13.653333 95.573334-95.573333 34.133333 34.133333-75.093333 75.093334-21.845334-17.749334zM471.04 544.768l90.112-90.112-12.288-12.288-40.96 40.96c-5.461333-2.730667-10.922667-5.461333-15.018667-8.192l-12.288 16.384c4.096 1.365333 8.192 2.730667 13.653334 5.461333L458.752 532.48l12.288 12.288z" fill="#FFB2B2" p-id="8440"></path><path d="M570.709333 666.282667l-98.304-98.304c-4.096-15.018667-10.922667-28.672-17.749333-42.325334l-19.114667 6.826667c16.384 28.672 25.941333 57.344 30.037334 87.381333l19.114666 9.557334c-1.365333-8.192-1.365333-17.749333-2.730666-25.941334l76.458666 76.458667 12.288-13.653333zM603.477333 495.616l-92.842666 92.842667 25.941333 25.941333 9.557333-9.557333 8.192 8.192 30.037334-30.037334 17.749333 17.749334c2.730667 2.730667 2.730667 5.461333-1.365333 9.557333-4.096 4.096-9.557333 9.557333-15.018667 13.653333l16.384 10.922667 16.384-16.384c9.557333-9.557333 9.557333-19.114667 1.365333-27.306667l-20.48-20.48 30.037334-30.037333-8.192-8.192 8.192-8.192-25.941334-28.672zM546.133333 598.016l-10.922666-10.922667 66.901333-66.901333 10.922667 10.922667-66.901334 66.901333zM486.058667 543.402667l28.672 28.672 70.997333-70.997334-28.672-28.672-70.997333 70.997334z m31.402666 5.461333l-8.192-8.192 43.690667-43.690667 8.192 8.192-43.690667 43.690667zM757.76 446.464l17.749333 9.557333 16.384-16.384c10.922667-10.922667 10.922667-21.845333 0-32.768l-109.226666-109.226666-110.592 110.592 70.997333 70.997333c19.114667 19.114667 30.037333 39.594667 34.133333 61.44l20.48-1.365333c-2.730667-20.48-12.288-40.96-28.672-61.44l34.133334-34.133334 40.96 40.96 13.653333-13.653333-40.96-40.96 35.498667-35.498667 21.845333 21.845334c5.461333 5.461333 5.461333 10.922667 1.365333 15.018666-5.461333 4.096-10.922667 9.557333-17.749333 15.018667zM682.666667 324.949333l21.845333 21.845334-36.864 35.498666-21.845333-21.845333 36.864-35.498667z m-83.285334 83.285334l32.768-32.768 21.845334 21.845333-32.768 32.768-21.845334-21.845333zM655.36 464.213333l-21.845333-21.845333 32.768-32.768 21.845333 21.845333L655.36 464.213333z m47.786667-47.786666l-21.845334-21.845334 35.498667-35.498666 21.845333 21.845333-35.498666 35.498667z" fill="#FFB2B2" p-id="8441"></path></svg>
                    </div>
                    <!--编辑打开-->
                    <div class="DesignFiles-module-div-edit" v-if="item.id == activeId">
                        <div @mouseenter="activeTypeBtn(1)" @mouseleave="activeTypeBtn(0)" @click="openBtn(item, 0)">
                            <span v-if="activeType==1">打开</span>
                            <i style="font-size: 14px;" v-else class="el-icon-folder-opened"></i>
                        </div>
                        <div v-if="item.approval_state != 4" @mouseenter="activeTypeBtn(2)" @mouseleave="activeTypeBtn(0)"
                             @click="openBtn(item, 1)">
                            <el-button type="text" v-if="activeType==2" :disabled="!nodeActions.includes('edit')" style="font-size: 12px;">编辑</el-button>
                            <i style="font-size: 14px;" v-else class="el-icon-edit-outline"></i>
                        </div>
                        <div v-if="item.state == 0" @mouseenter="activeTypeBtn(3)" @mouseleave="activeTypeBtn(0)" @click="delBtn(item.number)"
                             style="position:absolute;right: 5px;">
                            <el-button type="text" v-if="activeType==3" :disabled="!nodeActions.includes('del')" style="font-size: 12px;">删除</el-button>
                            <i style="font-size: 14px;" v-else class="el-icon-delete"></i>
                        </div>
                    </div>
                    <el-row style="padding-bottom: 8px;border-bottom: 1px dashed #dcdfe6;">
                        <el-col :span="6" class="copy-tag" @click.native="copyBtn(item.number, '.copy-tag', '款号已复制：'+item.number)">
                            <el-image :src="item.thumb_images" fit="contain" style="height:106px;display: flex;justify-content: center;align-items: center;">
                                <div slot="error" class="image-slot">
                                    <svg t="1718243625888" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2447" width="32" height="32"><path d="M400.696 268.795c-17.249 0-31.233 13.986-31.233 31.233v30.471c0 17.249 13.986 31.233 31.233 31.233s31.233-13.986 31.233-31.233v-30.471c0-17.249-13.985-31.233-31.233-31.233z" fill="#999999" p-id="2448"></path><path d="M623.649 361.734c17.249 0 31.234-13.986 31.234-31.233v-30.471c0-17.249-13.986-31.233-31.234-31.233s-31.233 13.986-31.233 31.233v30.471c-0.001 17.248 13.985 31.233 31.233 31.233z" fill="#999999" p-id="2449"></path><path d="M438.295 388.804c-14.656 9.104-19.155 28.362-10.050 43.013 11.209 18.047 41.976 48.59 86.157 48.59 43.958 0 75.1-30.313 86.574-48.223 9.303-14.529 5.068-33.847-9.455-43.15-14.539-9.298-33.852-5.068-43.15 9.455-0.122 0.199-13.38 19.45-33.969 19.45-20.009 0-32.444-18.128-33.278-19.373-9.166-14.423-28.28-18.805-42.829-9.761z" fill="#999999" p-id="2450"></path><path d="M824.508503 116.690676 571.592236 116.690676c-17.248849 0-31.233352 13.985526-31.233352 31.233352s13.985526 31.233352 31.233352 31.233352l252.916267 0c40.181141 0 72.878844 32.692586 72.878844 72.878844l0 396.966057-189.334159-165.29465c-12.20088-10.655687-30.517037-10.207479-42.173518 0.9967L468.578048 674.16231 309.521472 517.519714c-11.895935-11.70253-30.903847-12.002358-43.154869-0.645706L126.957507 646.163629l0-394.126382c0-40.186258 32.692586-72.878844 72.878844-72.878844l252.916267 0c17.248849 0 31.233352-13.985526 31.233352-31.233352S470.000444 116.690676 452.751594 116.690676L199.836351 116.690676c-74.632791 0-135.346571 60.71378-135.346571 135.346571l0 520.56405c0 74.632791 60.71378 135.346571 135.346571 135.346571l252.916267 0c17.248849 0 31.233352-13.985526 31.233352-31.233352s-13.985526-31.233352-31.233352-31.233352L199.836351 845.481164c-40.186258 0-72.878844-32.692586-72.878844-72.878844l0-41.23924 160.003134-148.385539 159.428036 157.007917c12.048407 11.865235 31.361265 11.981892 43.546795 0.274246l198.576661-190.68697 208.876238 182.346001 0 40.683585c0 40.186258-32.697703 72.878844-72.878844 72.878844L571.592236 845.481164c-17.248849 0-31.233352 13.985526-31.233352 31.233352s13.985526 31.233352 31.233352 31.233352l252.916267 0c74.627674 0 135.346571-60.71378 135.346571-135.346571L959.855074 252.037247C959.855074 177.404456 899.136178 116.690676 824.508503 116.690676z" fill="#999999" p-id="2451"></path></svg>
                                </div>
                            </el-image>
                        </el-col>
                        <el-col :span="18" style="padding-left: 4px;">
                            <el-row style="padding-bottom: 8px;border-bottom: 1px dashed #dcdfe6;">
                                <el-row style="font-size: 16px;">
                                    <el-col :span="16" style="font-weight: 800">{{ item.number }}</el-col>
                                    <el-col :span="8" style="color:#e579058a;font-size: 14px;font-weight: bold">上新{{ item.year }}-{{ item.month }}</el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="19" style="font-size: 14px;" class="ellipsis">
                                        {{ item.name }}
                                    </el-col>
                                    <el-col :span="5">
                                        <template v-for="sItem in states">
                                            <el-tag v-if="sItem.value==item.state" size="mini" :type="sItem.type" style="font-size: 10px;">{{sItem.label}}</el-tag>
                                        </template>
                                    </el-col>
                                    <el-col :span="24" class="ellipsis" style="color:#909399">
                                        简称：{{ item.short_name || "--" }}
                                    </el-col>
                                </el-row>
                            </el-row>
                            <el-row style="padding-top: 6px;">
                                <el-row style="padding-bottom: 4px;">
                                    <el-col :span="4" class="ellipsis">{{ item.season || "--" }}</el-col>
                                    <el-col :span="6" class="ellipsis"> {{ item.product_category || "--" }}</el-col>
                                    <el-col :span="14" class="ellipsis">{{ item.detail_category || "--" }}</el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="4" class="ellipsis">{{ item.target || "--" }}</el-col>
                                    <el-col :span="6" class="ellipsis">{{ item.brand || "--" }}</el-col>
                                    <el-col :span="14" class="ellipsis p-number" @click.native="copyBtn(item.package_number, '.p-number', '套装编码已复制：'+item.package_number)">
                                        套装编码：<span>{{item.package_number || "--" }}</span>
                                    </el-col>
                                </el-row>
                            </el-row>
                        </el-col>
                    </el-row>
                    <el-row style="padding-top: 6px;">
                        <el-row>
                            <el-col :span="6">
                                <span class="circle-text">图</span>{{ item.f3 || "--" }}
                            </el-col>
                            <el-col :span="6" class="ellipsis">
                                <span class="circle-text" style="border: 1px solid #ff7171;color: #ff7171;">产</span>{{ item.designer || "--" }}
                            </el-col>
                            <el-col :span="6">
                                <span class="circle-text" style="border: 1px solid #2d8cf0;color: #2d8cf0;">版</span>{{ item.paper_designer || "--" }}
                            </el-col>
                            <el-col :span="6">
                                <span class="circle-text" style="border: 1px solid #ed4014;color: #ed4014;">绣</span>{{ item.embroider_designer || "--" }}
                            </el-col>
                        </el-row>
                        <el-row style="padding-top: 6px;color: #909399;">
                            <el-col :span="10">创建人：{{ item.creator || "--" }}</el-col>
                            <el-col :span="14">创建时间：{{ item.creation_time || "--"}}</el-col>
                        </el-row>
                    </el-row>
                </div>
            </div>
        </el-col>
        <!--翻页栏-->
        <div style="margin-top: 4px;overflow: hidden;float: right;">
            <Page :total="total" :current="page" :page-size="limit" show-total @on-change="pageChange"></Page>
        </div>
    </section>
</template>

<script>
import {copyText} from "@/libs/tools";
import {userList} from "../../api/user";
import {categoryList, classList} from "../../api/bs/info";
import {designList, designDel} from "../../api/bs/design";

export default {
    name: "bs_design",
    data() {
        return {
            tableHeight: window.innerHeight - 220+"px",
            selectIndex: 0,
            btnLoading: false,
            loading: false,
            page: 1,
            limit: 20,
            total: 0,
            data: [],
            user: {},
            nodeActions: [],

            productCategoryList: [],//品类
            userList: [],
            form: {
                number : "",
                name: "",
                state: "",
                package_number: "",
                designer: "",
                f3: "",
                year_month: "",
                paper_designer: "",
                embroider_designer: "",
                product_category_id: "",
                season_id: "",
                category_id: "",
                materiel: "",
                supplier: ""
            },
            categoryList: [],//设计分类
            categoryProps: {
                value: "id",
                label: "name",
                lazy: true,
                lazyLoad (node, resolve) {
                    let nodes = [];
                    if(node.value){
                        categoryList({page: 1, limit: 100, tab: node.value}).then((res) => {
                            res.data.data.forEach(item => {
                                nodes.push({id: item.id, name: item.name, leaf : true})
                            })
                            resolve(nodes);
                        })
                    }
                }
            },
            seasonList: [
                {id: 1 , name:  '春'},
                {id: 2 , name:  '夏'},
                {id: 3 , name:  '秋'},
                {id: 4 , name:  '冬'},
                {id: 5 , name:  '春夏'},
                {id: 6 , name:  '秋冬'},
                {id: 7 , name:  '全季'},
            ],
            brandList : [
                {id: 1 , name:  '十三余'},
                {id: 2 , name:  '有香'},
                {id: 4 , name:  '一弦一木'},
                {id: 5 , name:  '锦瑟'},
                {id: 6 , name:  '七月夕'},
            ],
            states: [
                {label: "未确认", value: 0, type: "info"},
                {label: "设计确认", value: 1, type: ""},
                {label: "技术确认", value: 2, type: "warning"},
                {label: "生产确认", value: 3, type: "success"}
            ],
            activeId: "",
            activeType: 0,//1打开 2编辑
        }
    },
    created() {
        this.user = this.$store.getters.user;
        this.nodeActions = this.user.node_actions[this.$route.meta.id] ? this.user.node_actions[this.$route.meta.id] : [];
        console.log("design", this.nodeActions);
    },
    methods: {
        //选择设计分类
        categoryChange(val){
            this.form.product_category_id = val[0];
            this.form.category_id = val[1];
        },
        //品类
        getClassData(){
            classList({page: 1, limit: 100}).then((res) => {
                this.productCategoryList = res.data.data;
                this.categoryList = res.data.data;
            })
        },
        //查询用户
        searchUserBtn(val){
            if(val == ""){
                return;
            }
            this.searchLoading = true;
            userList({page: 1, limit:20,source_from: 'fs', name: val}).then((res) =>{
                this.searchLoading = false;
                this.userList = res.data.data;
            }).catch(() =>{
                this.searchLoading = false;
            })
        },
        //搜索按钮
        searchBtn() {
            this.page = 1;
            this.getData();
        },
        //翻页
        pageChange(page) {
            this.page = page;
            this.getData();
        },
        //获取数据
        getData() {
            let param = {
                page: this.page,
                limit: this.limit,
            };
            param = Object.assign(param, this.form);
            param .is_subject = this.user.is_subject;
            this.loading = true;
            designList(param).then((res) => {
                this.loading = false;
                this.total = res.data.total;
                this.data = res.data.data;
            }).catch(() => {
                this.loading = false;
            });
        },
        //鼠标移入卡片事件
        activeBtn(id){
            this.activeId = id;
        },
        //鼠标移入编辑区域事件
        activeTypeBtn(type){
            this.activeType = type;
        },
        //打开设计档案
        openBtn(row, isEdit){
            //防止新开路由
            for(let item of this.$store.state.app.tagNavList){
                if(item.params && item.params.id == row.number){
                    isEdit = item.params.isEdit;
                    break;
                }
            }
            this.activeId = "";
            this.activeType = 0;//1打开 2编辑
            this.$router.push({
                name: "pages_designEd",
                params: {id: row.number, isEdit: isEdit}
            })
        },
        //删除设计档案
        delBtn(number){
            this.$confirm('确认删除该设计档案，数据将永远无法恢复，是否继续', '提示', {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.loading = true;
                designDel({type_no: number}).then((res) => {
                    this.loading = false;
                    if(res.code === 0){
                        this.$message.success("删除成功");
                        this.getData();
                    }else{
                        this.$message.error(res.msg);
                    }
                }).catch(() => {
                    this.loading = false;
                })
            }).catch(() => {

            });
        },
        //复制款号
        copyBtn(content, classDom, msg){
            console.log(content, classDom, msg)
            copyText(classDom, content);
            this.$message.success(msg)
        },
        addBtn(){
            this.$router.push({
                name: "pages_designEd",
                params: {id: '新增', isEdit: 1}
            });
        },
    },
    mounted() {
        this.searchBtn();
        this.getClassData();
    }
}
</script>

<style scoped>
.ellipsis {
    overflow: hidden; /* 确保超出容器的内容被裁剪 */
    white-space: nowrap; /* 确保文本在一行内显示 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
}
.DesignFiles-module{
    display: flex;
    flex-wrap: wrap;
    margin-top: 8px;
}
.DesignFiles-module-div{
    overflow: hidden;
    position: relative;
    margin: 0 8px 8px 0;
    border-radius: 4px;
    box-shadow: 0 0 10px 0 rgba(122,98,245,.08);
    padding: 8px;
    width: 360px;
    background-color: #2d8ff008;
    border: 1px solid rgba(0, 0, 0, .1);
}
.DesignFiles-module-div-gif {
    position: absolute;
    top: -40px;
    right: -20px;
    width: 0;
    height: 0;
    border: 30px solid transparent;
    transform: rotate(45deg);
    color: #ffffff;
    line-height: 40px;
}
.DesignFiles-module-div-stop {
    position: absolute;
    height: 100%;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.DesignFiles-module-div-edit {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    background: #57a3f3d9;
    height: 40px;
    display: flex;
    align-items: center;
    color: #2c70d6;
    padding: 0 8px;
    animation: fadeInDown .5s;
}
.DesignFiles-module-div-edit div {
    cursor:pointer;
    display: inline-block;
    width: 40px;
    height:24px;
    line-height:24px;
    background-color:white;
    text-align:center;
    margin-right: 4px;
    border-radius: 2px;
}


@keyframes fadeInDown {
    0% {
        transform: translate3d(0, -100%, 0);
        opacity: 0;
    }
    100% {
        transform: none;
        opacity: 1;
    }
}

.circle-text{
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    display: inline-block;
    border: 1px solid #752cd6;
    color: #752cd6;
    border-radius: 20px;
    margin-right: 8px;
}

.more-btn /deep/ .el-badge__content.is-fixed.is-dot{
    top: 5px;
}
</style>
